<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/dialog/popup.js" charset="utf-8"></script>
<div id="popupDemo">
	<div title='API' tabid='tab1'>
		<h2>Ccay.Component.popup(popupBean,title,isMultiSelect,width,height)</h2>
		<h3>调用通用弹出框方法</h3><br />
		<p fontcolor="red"><font color="red">注：</font>popupBean 必填  该参数对象包含了弹出框查询所用到的所有参数。
		<form id="param" class="init ccay-form">			
					<div class="ccay-form-body ccay-form-custom">
						<ul>
						<li class="ccay-form-row">
							<samp><h3>参数</h3></samp> 
							<span class="ccay-form-input"><h3>描述</h3></span>
						</li>
						<li class="ccay-form-row">
							<samp class="i18n" i18nKey="popupBean"></samp> 
							<span class="ccay-form-input">
							        <form class="init ccay-form">
							        <div class="ccay-form-body">
							          <ul>
							              <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="参数项"></samp>
										 	<span class='ccay-form-input'>说明</span>
										  </li>
							          </ul>
							        </div>
							        <div class="ccay-form-body ccay-form-custom">
									  <ul>
										  <li class="ccay-form-row ccay-form-whole">
										 	<samp class="i18n" i18nKey="servicePath"></samp>
										 	<span class='ccay-form-input'>
										 	     <p>{String类型}<p>对应rest service的服务路径,根据该路径, 调用其通用查询服务 
										 	</span>
										 </li>
										 <li class="ccay-form-row ccay-form-whole">
										 	<samp class="i18n" i18nKey="queryParam"></samp>
										 	<span class='ccay-form-input'>
										 	     <p>{Object类型}默认的查询条件，可自己设置，
										 	     <p>如 queryParam={name:$S("#defaultQueryParam")};name为弹出框的vo的某个字段。
										 	     <font color="red">该条件在弹出框中的搜索条件清除不了。</font>
										 	</span>
										 </li>
										  <li class="ccay-form-row ccay-form-whole">
										 	<samp class="i18n" i18nKey="queryParam"></samp>
										 	<span class='ccay-form-input'>
										 	     <p>{Function类型}默认的查询条件，可自己设置，
										 	     <p>如 queryParam=function(){return {name:$S("#defaultQueryParam")}};name为弹出框的vo的某个字段。
										 	     <font color="red">该条件在弹出框中的搜索条件清除不了。</font>
										 	</span>
										 </li>
										 <li class="ccay-form-row ccay-form-whole">
										 	<samp class="i18n" i18nKey="autoLoad"></samp>
										 	<span class='ccay-form-input'>
										 	     <p>{Boolean}<p>是否加载后自动根据配置的参数加载查询弹出框的左边数据, 默认为true
										 	</span>
										 </li>
										  <li class="ccay-form-row ccay-form-whole">
										 	<samp class="i18n" i18nKey="selectedItems"></samp>
										 	<span class='ccay-form-input'>
										 	     <p>{String[]类型}<p>多选弹出框使用,，传入已选的数据，[2,3,5,7] or ["china","usa","japan"]
										 	</span>
										 </li>
										  <li class="ccay-form-row ccay-form-whole">
						                    <samp class="i18n" i18nKey="columns"></samp>
						                    <span class="ccay-form-input">{Object[]类型}
						                         <p>显示列头定义,如:[{header:"第一列",name:"id",}{header:"第二列",name:"name",isCondition:true}]
						                         <p>isCondition:{Boolean}为true时，则该字段作为弹出框数据的搜索条件
						                         <p>header:列头显示，支持国际化，如：设置为header：$i18n("ccay.common.label.status")</span>
					                     </li>
					                     <li class="ccay-form-row ccay-form-whole">
						                     <samp class="i18n" i18nKey="uniqueKey"></samp>
						                     <span class="ccay-form-input">{String类型}<p>查询数据中的一个唯一键属性名，区分已选数据，多选的时候是必须的。<p></span>
					                     </li>
					                     
					                    <li class="ccay-form-row  ccay-form-whole">
						                     <samp class="i18n" i18nKey="condRender"></samp>
						                 <span class="ccay-form-input">{function} 返回html字符串，会拼接到条件区</span>
					                    </li>
					                    <li class="ccay-form-row ccay-form-whole">
						                     <samp class="i18n" i18nKey="initRender"></samp>
						                 <span class="ccay-form-input">{function} 可对条件区的输入框操作，渲染下拉框等，可与condRender结合使用</span>
					                    </li>
					                    
					                    <li class="ccay-form-row  ccay-form-whole">
						                     <samp class="i18n" i18nKey="callback"></samp>
						                 <span class="ccay-form-input">弹出框选择确认后的回调函数</span>
					                    </li>
					                    
					                    <li class="ccay-form-row  ccay-form-whole">
						                     <samp class="i18n" i18nKey="openPage"></samp>
						                 <span class="ccay-form-input">{Boolean}设置请求是否分页</span>
					                    </li>
					                    
					                    <li class="ccay-form-row  ccay-form-whole">
						                     <samp class="i18n" i18nKey="paramToJsonStr"></samp>
						                 <span class="ccay-form-input">{String}指定名称，把搜索条件封装成json格式</span>
					                    </li>
					                    
					                    <li class="ccay-form-row  ccay-form-whole">
						                     <samp class="i18n" i18nKey="ajax"></samp>
						                 <span class="ccay-form-input">{Object}自定义Ajax，替代servicePath</span>
					                    </li>
					                    <li class="ccay-form-row ccay-form-whole"><samp class="i18n" i18nKey="buttonIsCenter"></samp>
											<span class="ccay-form-input"> {boolean} <p>search和clear按钮是否换行居中,只在igrid中有有效
										</span></li>
										<li class="ccay-form-row ccay-form-whole"><samp class="i18n" i18nKey="dialogOp"></samp>
											<span class="ccay-form-input"> {boolean}
												<p>SP6新增属性。dialog 参数设置，如left、top 等
										</span></li>
									 </ul>
							       </div>
							       </form>
							</span>
						</li>
						<li class="ccay-form-row">
						    <samp class="i18n" i18nKey="title"></samp>
						    <span class="ccay-form-input">{String类型}<p>必填 ：弹出框标题</span>
					    </li>
					    <li class="ccay-form-row">
						    <samp class="i18n" i18nKey="isMultiSelect"></samp>
						    <span class="ccay-form-input">{boolean类型}<p>必填 ：是否多选</span>
					    </li>
					    <li class="ccay-form-row">
						    <samp class="i18n" i18nKey="historySupport"></samp>
						    <span class="ccay-form-input">{boolean类型}<p>false的时候  去掉历史记录   默认true;</span>
					    </li>
					    
						<li class="ccay-form-row">
						<samp class="i18n" i18nKey="width"></samp>
						<span class="ccay-form-input">{number类型}<p>可选 ：弹出框宽度 可不传</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="height"></samp>
						<span class="ccay-form-input">{number类型}<p>可选 ：弹出框高度 可不传</span>
					</li>
					</ul>
			   </div>
		    </form>
		      
<!--
		<form id="param" class="init ccay-form">
			<div class="ccay-form-body ccay-form-custom">
				<ul>
					<li class="ccay-form-row">
						<samp><h3>参数</h3></samp>
						<span class="ccay-form-input">
							<h3>描述</h3>
						</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="popupBean.servicePath"></samp>
						<span class="ccay-form-input">{String类型}<p>对应rest service的服务路径,根据该路径, 调用其通用查询服务</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="popupBean.selectedItems"></samp>
						<span class="ccay-form-input">{String[]类型}<p>多选弹出框使用,，传入已选的数据，[2,3,5,7] or ["china","usa","japan"]</span>
					</li>
					<li class="ccay-form-row ccay-form-whole">
						<samp class="i18n" i18nKey="popupBean.columns"></samp>
						<span class="ccay-form-input">{Object[]类型}<p>显示列头定义,如:[{header:"第一列",name:"id",}{header:"第二列",name:"name",isCondition:true}]
						<p>isCondition:{Boolean}为true时，则该字段作为弹出框数据的搜索条件
						<p>header:列头显示，支持国际化，如：设置为header：$i18n("ccay.common.label.status")</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="popupBean.uniqueKey"></samp>
						<span class="ccay-form-input">{String类型}<p>查询数据中的一个唯一键属性名，区分已选数据，多选的时候是必须的。<p></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="popupBean.callback"></samp>
						<span class="ccay-form-input">弹出框选择确认后的回调函数</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="title"></samp>
						<span class="ccay-form-input">{String类型}<p>弹出框标题</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="isMultiSelect"></samp>
						<span class="ccay-form-input">{boolean类型}<p>是否多选</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="width"></samp>
						<span class="ccay-form-input">{number类型}<p>弹出框宽度 可不传</span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="height"></samp>
						<span class="ccay-form-input">{number类型}<p>弹出框高度 可不传</span>
					</li>																				
				</ul>
			</div>
		</form>
-->
	</div>
	<div title='单选' tabid='tab2'>
		<div>
			<h4><span>实例1:角色单选弹出框</span></h4>
			<div style="padding-left:30px">
			<div class="ccay-form-input">
	    		hidden:<input type="text" name="id1"/>
				visiable:<input type="text" name="name1"/>
				<input type="button" class="button" id="btnSingle" value="..."  onclick="Ccay.example.ui.popup.popupRole()"/>
			    <input type="button" title="清除选择的数据" value="C"  onclick="Ccay.example.ui.popup.reset()"/>
			</div>
			<div>
				<span class="ccay-form-input">调用通用弹出框方法,打开一个角色单选弹出框</span>
			</div>
			<br>
			<h3>html 源码:</h3>
			<div class="codeArea">
				<pre id='html1'>
hidden:&lt;input type="text" name="id1">
visiable:&lt;input type="text" name="name1">
&lt;input type="button" class="button" id="btnSingle" value="..."  onclick="popupRole()" />				
&lt;input type="button" class="i18n" id="reset" i18nKey="ccay.common.button.clearselect"  onclick="resetData()"/>
				</pre>
				</div>
				<br>
			<h3>js 源码:</h3>
				<div class="codeArea">
				<pre id="js1">
//角色通用查询弹出框（单选）方法				
popupRole=function(){
	var callback = function(role) {
	//根据回调函数，得到选中的值，再复制给文本框
			$S("input[name='id1']").val(role.id);
			$S("input[name='name1']").val(role.name);
		};
		var columns = [{
		/*显示列头定义,如:[{header:"第一列",name:"id",}{header:"第二列",name:"name",isCondition:true}]
               isCondition:{Boolean}为true时，则该字段作为弹出框数据的搜索条件
               header:列头显示，支持国际化，如：设置为header：$i18n("ccay.common.label.status") */
				header : $i18n("ccay.security.label.name"),
				id : 'name',
				isCondition : true
			}, {
				header : $i18n("ccay.common.label.description"),
				id : 'roleDesc',
				isCondition : true
			}];
		var rolePopupBean = {
			igrid : true,
			queryParam : {},
			/*对应rest service的服务路径,根据该路径, 调用其通用查询服务*/
			servicePath : "services/manage/security/roleManage/list",
			/*查询数据中的一个唯一键属性名，区分已选数据，多选的时候是必须的*/
			uniqueKey : "id",
			/*autoLoad是否加载后自动根据配置的参数加载查询弹出框的左边数据, 默认为true*/
			//autoLoad:false,
			/*显示列头定义*/
			columns : columns,
			/* 弹出框选择确认后的回调函数*/
			callback : callback 
		};
		Ccay.Component.popup(rolePopupBean,
				$i18n("ccay.registry.label.popupTitle"), false);
};

// 清除已选择的数据
resetData = function(){
	$S("input[name=\"id1\"]").ccaySetValue("");
		$S("input[name=\"name1\"]").ccaySetValue("");
};
				</pre>
			</div>
			<div class='try'>
				<a onclick="Ccay.example.openTry('#popupDemo',$('#js1').html(),$('#html1').html())">亲自试一试</a>
			</div>
			</div>
		</div>
	</div>	
	<div title='多选' tabid='tab3'>
		<div>
			<h4><span>实例2:角色多选弹出框</span></h4>
			<div style="padding-left:30px">
			<div class="ccay-form-input">
	    		hidden:<input type="text" name="id2"/>
				visiable:<input type="text" name="name2"/>
				<input type="button" class="button" id="btnSingle" value="..."  onclick="Ccay.example.ui.popup.popupRoleMulti()"/>
			</div>
			<div>
				<span class="ccay-form-input">调用通用弹出框方法,打开一个角色多选弹出框</span>
			</div>
			<br>
			<h3>html 源码:</h3>
			<div class="codeArea">
				<pre id='html2'>
hidden:&lt;input type="text" name="id2">
visiable:&lt;input type="text" name="name2">
&lt;input type="button" class="button" id="btnSingle" value="..."  onclick="popupRoleMulti()">			
				</pre>
				</div>
				<br>
			<h3>js 源码:</h3>
			<div class="codeArea">
				<pre id="js2">
//角色通用查询弹出框（多选）方法				
popupRoleMulti=function(){
var callback=function(roles){
//根据回调函数，得到选中的值，再复制给文本框
	var roleids="";rolenames="";
	$.each(roles,function(){
		roleids+=this.id+",";
		rolenames+=this.name+",";
	});
	
	$("input[name='id2']").val(roleids);
	$("input[name='name2']").val(rolenames);
};
//<font color="red">//将已经选择的值赋给rolePopupBean.selecteItems参数
var selectedItems=$("input[name='id2']").val().split(",")||[];//</font>
//初始化 弹出参数bean。
var columns=[
             /*显示列头定义,如:[{header:"第一列",name:"id",}{header:"第二列",name:"name",isCondition:true}]
               isCondition:{Boolean}为true时，则该字段作为弹出框数据的搜索条件
               header:列头显示，支持国际化，如：设置为header：$i18n("ccay.common.label.status") */
             {header:$i18n("ccay.security.label.name"),
               id: 'name',isCondition:true},
             {header:$i18n("ccay.common.label.description"),
               id: 'roleDesc',isCondition:true}];		
var rolePopupBean={
	   igrid:true,
           queryParam:{},
           /*对应rest service的服务路径,根据该路径, 调用其通用查询服务*/
           servicePath:"services/manage/security/roleManage/list",
           /*查询数据中的一个唯一键属性名，区分已选数据，多选的时候是必须的*/
           uniqueKey:"id",
           /*autoLoad是否加载后自动根据配置的参数加载查询弹出框的左边数据, 默认为true*/
		   //autoLoad:false,
           /*显示列头定义*/
           columns:columns,
           /* 弹出框选择确认后的回调函数*/
           callback:callback,
           /*多选弹出框使用,，传入已选的数据，[2,3,5,7] or ["china","usa","japan"] */
           selectedItems:selectedItems};
Ccay.Component.popup(rolePopupBean,$i18n("ccay.registry.label.popupTitle"),selectedItems && true);	
}          
   
 </pre>
			</div>
		 	<a onclick="Ccay.Common.toggle(this,'#serviceCodeArea')"><font size="8px;">Service 源码 >></font></a>
			<div id="serviceCodeArea" class="codeArea" style="display:none;">
<pre>
/**
 * 查询数据，初始化弹出框的Role可选数据
 * <font color="red">左边可选数据</font>
 * @param programVO
 * @param page
 * @return
 */
@GET
@Path("list/page/{pageSize}/{curPage}")
@CcayOperation(policy=SecurityPolicy.AllSystemUser)
public PagedResult&lt;RoleVO> findPopupDataList(@QueryParam("") RoleVO roleVO,@PathParam("") PageVO page) {
	//查询有效的角色
	//在用户管理-角色弹出框中，要求不要限制角色
	//roleVO.setStatus(1);
	return roleService.findRoleList(roleVO, page);
}

/**
 * 根据RoleId列表查询Role集合
 * <font color="red">右边已选数据</font>
 * @param ids
 * @return
 */
@POST
@Path("list")
@CcayOperation(policy=SecurityPolicy.AllSystemUser)
public List&lt;RoleVO> findSelectedDataList(String[] ids) {
	return roleService.findRolesByMultiId(ids);
}
</pre>
			</div>
			<br><br>
			<div class='try'>
				<a onclick="Ccay.example.openTry('#popupDemo',$('#js2').html(),$('#html2').html())">亲自试一试</a>
			</div>
			</div>
			
			<!-------------  给弹出框加demo  去掉历史记录  -->
				
			<h4><span>实例3:角色多选弹出框s</span></h4>
			 <h4>	<font color="red">  设置historySupport : false, 去掉弹出框勾选的历史记录</font></h4>
			<div style="padding-left:30px">
			<div class="ccay-form-input">
	    		hidden:<input type="text" name="id21"/>
				visiable:<input type="text" name="name21"/>
				<input type="button" class="button" id="btnSingle1" value="..."  onclick="Ccay.example.ui.popup.popupRoleMulti1()"/>
			</div>
			<div>
				<span class="ccay-form-input">调用通用弹出框方法,打开一个角色多选弹出框</span>
			</div>
			<br>
			<h3>html 源码:</h3>
			<div class="codeArea">
				<pre id='html21'>
hidden:&lt;input type="text" name="id211"/>
visiable:&lt;input type="text" name="name211"/>
&lt;input type="button" class="button" id="btnSingle11" value="..."  onclick="popupRoleMulti1()"/>
				</pre>
				</div>
				<br>
			<h3>js 源码:</h3>
			<div class="codeArea">
				<pre id="js21">
	popupRoleMulti1 = function() {
		var callback = function(roles) {
			var roleids = "";
			rolenames = "";
			$.each(roles, function() {
						roleids += this.id + ",";
						rolenames += this.name + ",";
					});

			$("input[name='id211']").val(roleids);
			$("input[name='name211']").val(rolenames);
		};
		var selectedItems = $("input[name='id211']").val().split(",") || [];
		var columns = [{
				header : $i18n("ccay.security.label.name"),
				id : 'name',
				isCondition : true
			}, {
				header : $i18n("ccay.common.label.description"),
				id : 'roleDesc',
				isCondition : true
			}];
		var rolePopupBean1 = {
			igrid :true,
			queryParam : {},
			// <font color="red"> 设置historySupport : false, 去掉弹出框勾选的历史记录</font>
			historySupport : false,
			servicePath : "services/manage/security/roleManage/list",
			uniqueKey : "id",
			columns : columns,
			callback : callback,
			selectedItems : selectedItems
		};
		Ccay.Component.popup(rolePopupBean1,$i18n("ccay.registry.label.popupTitle"),selectedItems && true);
	};    
 </pre>
			</div>
		 	
			<div id="serviceCodeArea1" class="codeArea" style="display:none;">
			</div>
			<br><br>
			<div class='try'>
				<a onclick="Ccay.example.openTry('#popupDemo',$('#js21').html(),$('#html21').html())">亲自试一试</a>
			</div>
			</div>
				
				
			<!-------------  给弹出框加demo  去掉历史记录  -->
			
			
			
		</div>
	</div>
	<div title='默认条件弹出框' tabid='tab4'>
		<div>
			<h4><span>实例3:默认查询条件</span></h4>
			<div style="padding-left:30px">
			<div class="ccay-form-input">
			        默认查询条件：<input type="text" name="defaultQueryParam" id="defaultQueryParam" value="系统">
	    		id(hidden):<input type="text" name="id3">
		        name(visiable):<input type="text" name="name3">
		        <input type="button" class="button" id="btnSingle" value="..." onclick="Ccay.example.ui.popup.popupRole2()">
			</div>
			<div>
				<span class="ccay-form-input">调用通用弹出框方法,打开一个默认角色单选弹出框</span>
			</div>
			<br>
			<h3>html 源码:</h3>
			<div class="codeArea">
				<pre id='html3'>

id(hidden):&lt;input type="text" name="id31">
name(visiable):&lt;input type="text" name="name31">
&lt;input type="button" class="button" id="btnSingle" value="..."  onclick="popupRole2()">				
				</pre>
				</div>
				<br>
			<h3>js 源码:</h3>
				<div class="codeArea">
				<pre id="js3">

//角色通用查询弹出框（默认查询条件）方法				
popupRole2=function(){
	var callback=function(role){
	            //根据回调函数，得到选中的值，再复制给文本框
		        $S("input[name='id31']").val(role.id);
		        $S("input[name='name31']").val(role.name);
	    };
	var columns = [{
		header : $i18n("ccay.security.label.name"),
		id : 'name',
		isCondition : true
	}, {
		header : $i18n("ccay.common.label.description"),
		id : 'roleDesc',
		isCondition : true
	}];
	var bean = {
			igrid :true,
			queryParam : {},
			historySupport : false,
			servicePath : "services/manage/security/roleManage/list",
			uniqueKey : "id",
			columns : columns,
			callback : callback
	};
	//<font color='red'>bean.queryParam={name:$S("#defaultQueryParam")} 默认的查询条件，可自己设置</font>
	bean.queryParam={name:$S("#defaultQueryParam").val()};
	bean.allowEmptyCondition=false;
	Ccay.Component.popup(bean,$i18n("ccay.registry.label.popupTitle"));

} ;   
				</pre>
			</div>
			<div class='try'>
				<a onclick="Ccay.example.openTry('#popupDemo',$('#js3').html(),$('#html3').html())">亲自试一试</a>
			</div>
			</div>
		</div>
		<!-- queryParam -->
		<div>
			<h4><span>实例3.1:默认查询条件(使用queryParam Function)</span></h4>
			<div style="padding-left:30px">
			<div class="ccay-form-input">
			        默认查询条件：<input type="text" name="defaultQueryParam2" id="defaultQueryParam2" value="系统">
	    		id(hidden):<input type="text" name="id31">
		        name(visiable):<input type="text" name="name31">
		        <input type="button" class="button" id="btnSingle" value="..." onclick="Ccay.example.ui.popup.popupRole21()">
			</div>
			<div>
				<span class="ccay-form-input">调用通用弹出框方法,打开一个默认角色单选弹出框</span>
			</div>
			<br>
			<h3>html 源码:</h3>
			<div class="codeArea">
				<pre id='html31'>

id(hidden):&lt;input type="text" name="id311">
name(visiable):&lt;input type="text" name="name311">
&lt;input type="button" class="button" id="btnSingle2" value="..."  onclick="popupRole21()">				
				</pre>
				</div>
				<br>
			<h3>js 源码:</h3>
				<div class="codeArea">
				<pre id="js31">

//角色通用查询弹出框（默认查询条件）方法				
popupRole21=function(){
	var callback=function(role){
	            //根据回调函数，得到选中的值，再复制给文本框
		        $S("input[name='id311']").val(role.id);
		        $S("input[name='name311']").val(role.name);
	    };
	var columns = [{
		header : $i18n("ccay.security.label.name"),
		id : 'name',
		isCondition : true
	}, {
		header : $i18n("ccay.common.label.description"),
		id : 'roleDesc',
		isCondition : true
	}];
	var bean = {
			igrid :true,
			queryParam : {},
			historySupport : false,
			servicePath : "services/manage/security/roleManage/list",
			uniqueKey : "id",
			columns : columns,
			callback : callback
	};
	bean.queryParam=function(){
	//<font color='red'>....可进行一些逻辑操作</font>
		return{name:$S("#defaultQueryParam").val()};
	};
	bean.allowEmptyCondition=false;
	Ccay.Component.popup(bean,$i18n("ccay.registry.label.popupTitle"));

} ;   
				</pre>
			</div>
			<div class='try'>
				<a onclick="Ccay.example.openTry('#popupDemo',$('#js31').html(),$('#html31').html())">亲自试一试</a>
			</div>
			</div>
		</div>
	</div>
	<div title='自定义条件区（可渲染下拉框等）' tabid='tab5'>
		<div>
			<h4><span>实例4:自定义条件</span></h4>
			<div style="padding-left:30px">
			<div class="ccay-form-input">
			    id(hidden):<input type="text" name="id4">
		        name(visiable):<input type="text" name="name4">
		        <input type="button" id="popupByCondRender" value="..." onclick="Ccay.example.ui.popup.popupByCondRender()">
			</div>
			<br>
			<h3>html 源码:</h3>
			<div class="codeArea">
				<pre id='html4'>
id(hidden):&lt;input type="text" name="id41">
name(visiable):&lt;input type="text" name="name41">
&lt;input type="button" class="button" id="popupByCondRender1" value="..."  onclick="popupByCondRender22()" />				
				</pre>
				</div>
				<br>
			<h3>js 源码:</h3>
				<div class="codeArea">
				<pre id="js4">
// 自定义条件区域
popupByCondRender22 = function(){
	var callback = function(role) {
		$S("input[name='id41']").val(role.id);
		$S("input[name='name41']").val(role.name);
	};
	var columns = [
	  { header : $i18n("ccay.security.label.name"),
		id : 'name'}, 
	  { header : $i18n("ccay.common.label.description"),
		id : 'roleDesc'}];
	var rolePopupBean = {
		igrid : true,
		queryParam : {},
		servicePath : "services/manage/security/roleManage/list",
		uniqueKey : "id",
		columns : columns,
		callback : callback,
		/*<font color="red">*/
		condRender : function(){
			return "&lt;ul class='ccay-horRow'>"+
				        "&lt;li class='ccay-horRow-item'>状态（自定义条件）：&lt;/li>"+
				        "&lt;li class='ccay-horRow-item'>&lt;input type='text' name='status' />&lt;/li>"+
			        "&lt;/ul>"
		},
		initRender : function(divSelector){//divSelector默认传入条件区的id选择器
			divSelector.find("input[name='status']").attr("service","FN:getStatus1").ccayCombobox({
			    service:"FN:getStatus1",
			    valueField:"id",
			    displayField:"text"
			})
		}
		/*</font>*/
	};
	Ccay.Component.popup(rolePopupBean,
			$i18n("ccay.registry.label.popupTitle"), false);
};

getStatus1 = function(){
	return [{id:"1",text:"有效"},{id : "0", text:"无效"}];
}  
				</pre>
			</div>
			<div class='try'>
				<a onclick="Ccay.example.openTry('#popupDemo',$('#js4').html(),$('#html4').html())">亲自试一试</a>
			</div>
			</div>
		</div>
		
	</div>
	<div title='自定义pageSizeList'>
		<form>
			<h3>单选：</h3>
			<div class="ccay-form-input">
	    		hidden:<input type="text" name="ids"/>
				visiable:<input type="text" name="names"/>
				<input type="button" class="button" value="..."  onclick="Ccay.example.ui.popup.singlePopupCunstomPageSize()"/>
			    <input type="reset" title="清除选择的数据" value="C" />
			</div>
		</form>
		<form>
			<h3>多选：</h3>
			<div class="ccay-form-input">
	    		hidden:<input type="text" name="idm"/>
				visiable:<input type="text" name="namem"/>
				<input type="button" class="button" value="..."  onclick="Ccay.example.ui.popup.multiPopupCunstomPageSize()"/>
				<input type="reset" title="清除选择的数据" value="C" />
			</div>
		</form>
		<br><br>
		<font color="red">可自定义弹出框的grid的分页下拉列表pageSizeList和pageSize,单选和多选一样的配置，
		<p>若不配置，则默认<p>pageSizeList:[10,15,50,100,200,500],<p>pageSize:15(以个性化grid每页条数设置的为准)</font>
		<br><br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html6'>
hidden:&lt;input type="text" name="ids1"/>
visiable:&lt;input type="text" name="names1"/>
&lt;input type="button" class="button" id="btnSingle" value="..."  onclick="popupCunstomPageSize()" />				
				</pre>
				</div>
				<br>
			<h3>js 源码:</h3>
				<div class="codeArea">
				<pre id="js6">
popupCunstomPageSize=function(){
	var callback = function(role) {
		$S("input[name='ids1']").val(role.id);
		$S("input[name='names1']").val(role.name);
	};
	var columns = [{
			header : $i18n("ccay.security.label.name"),
			id : 'name',
			isCondition : true
		}, {
			header : $i18n("ccay.common.label.description"),
			id : 'roleDesc',
			isCondition : true
		}];
	var rolePopupBean = {
		igrid :true,
		/*<font color="red">*/
		pageSize:50,
		pageSizeList:[50,500],
		/*</font>*/
		queryParam : {},
		servicePath : "services/manage/security/roleManage/list",
		uniqueKey : "id",
		columns : columns,
		callback : callback
	};
	Ccay.Component.popup(rolePopupBean,
			$i18n("ccay.registry.label.popupTitle"), false);
}   
				</pre>
			</div>
			<div class='try'>
				<a onclick="Ccay.example.openTry('#popupDemo',$('#js6').html(),$('#html6').html())">亲自试一试</a>
			</div>
	</div>	
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:200px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	<div title="FAQ">
	  <form class="init ccay-form">
		<div class="ccay-form-body ccay-form-custom">
			<ul>						
			    <li class="ccay-form-row">
			        <samp><h3>问题</h3></samp>
					<span class="ccay-form-input">
						<h3>解决方案</h3>
					</span>
				</li>
				<!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->	
				<li class="ccay-form-row ccay-form-whole">
					<samp class="i18n" i18nKey="1.为什么弹出框的grid列头无法国际化？"></samp>							    
					<span class="ccay-form-input">弹出框的列头应该是header:$i18n("XXX")否则无国际化。<p>非弹出框的grid的列头设置为header:"XXX"，应注意区分</span>
				</li>
				<li class="ccay-form-row ccay-form-whole">
					<samp class="i18n" i18nKey="2.多选弹出框如何指定url？"></samp>							    
					<span class="ccay-form-input">左右两边的查询方法不一样，uniqueKey参数用来做左右数据比对的，
					 <p>左右各写一个方法，左边是分页方法，右边是根据字符串来查询数据，且URL分别为1，XXX/list/15/1  2,XXX/list，
					 <p>弹出框设置的传入的servicePath为XXX/list</span>
				</li>	
			</ul>
		</div>
	  </form>						
    </div>
</div>